<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--通用查询-->
      <queryHeader :permission="permission" />
      <crudOperation :permission="permission" />
    </div>

    <el-table ref="table" v-loading="crud.loading" :data="crud.data" :tree-props="{children: 'childs', hasChildren: 'hasChildren'}" row-key="id" @select="crud.selectChange" @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler">
      <el-table-column type="selection" width="55" />

      <el-table-column v-if="columns.visible('name')" :show-overflow-tooltip="true" label="菜单名称" width="220px" prop="name" />
      <el-table-column v-if="columns.visible('icon')" prop="icon" label="图标" align="center" width="60px">
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('sortNum')" prop="sort" align="center" label="排序">
        <template slot-scope="scope">{{ scope.row.sortNum }}</template>
      </el-table-column>
      <el-table-column v-if="columns.visible('path')" :show-overflow-tooltip="true" prop="path" label="路由地址" />
      <el-table-column v-if="columns.visible('permission')" :show-overflow-tooltip="true" prop="permission" label="权限标识" />
      <el-table-column v-if="columns.visible('component')" :show-overflow-tooltip="true" prop="component" label="组件路径" />
      <el-table-column v-if="columns.visible('iFrame')" prop="iFrame" label="外链" width="75px">
        <template slot-scope="scope">
          {{ dict.label.status_common_yesno[scope.row.iFrame] }}
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('cache')" prop="cache" label="缓存" width="75px">
        <template slot-scope="scope">
          {{ dict.label.status_common_yesno[scope.row.cache] }}
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('hidden')" prop="hidden" label="不可见" width="75px">
        <template slot-scope="scope">
          {{ dict.label.status_common_yesno[scope.row.hidden] }}
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="创建日期" width="135px">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130px" align="center" fixed="right">
        <template slot-scope="scope">
          <udOperation :data="scope.row" :permission="permission" msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！" />
        </template>
      </el-table-column>
    </el-table>

    <!--表单渲染-->
    <editForm />
  </div>
</template>

<script>
import crudMenu from '@/api/system/auth/menu/menu'
import editForm from './module/editForm'
import queryHeader from './module/queryHeader'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'

// crud交由presenter持有
const defaultCrud = CRUD({ title: '菜单', url: 'auth/resource/menu/tree', crudMethod: { ...crudMenu }, pkIdName: 'id', childParamName: 'childs' })

export default {
  name: 'Menu',
  components: { crudOperation, udOperation, editForm, queryHeader },
  mixins: [presenter(defaultCrud)],
  dicts: ['status_common_yesno'],
  data() {
    return {
      permission: {
        add: [],
        edit: [],
        del: []
      }
    }
  },
  methods: {

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
